<template>
    <div class="svg-content">
        <div class="container">
            <div class="group">
                <div class="con">
                    <div class="dashLine">
                        <p></p>
                        <p></p>
                        <p></p>
                    </div>
                    <div class="graphWrp" :id="id"></div>
                </div>
            </div>
            <svg style="width:0;height: 0">
                <defs>
                    <linearGradient x1="1" y1="0" x2="0" y2="1" id='gradientRing'>
                        <stop offset="0%" style="stop-color:#76c0ff;stop-opacity:1"></stop>
                        <stop offset="40%" style="stop-color:#76c0ff;stop-opacity:0.5"></stop>
                        <stop offset="74%" style="stop-color:#76c0ff;stop-opacity:0.0"></stop>
                    </linearGradient>
                </defs>
            </svg>
        </div>
    </div>
</template>
<script>
    import {d3, svgInit} from "./svgs";

    export default {
        props: {
            total: Number
        },
        data() {
            return {
                id: "circleGradient",
                width: 250,
                height: 250,
                data: [
                    {"x": "A计划", "y": 20},
                    {"x": "B计划", "y": 80}
                ],
                offsetStartAngle: 0,
                mask: false,
                lineWidth: 15, // 进度条宽
                offset: 3,
                diameter1: 90, //
                diameter2: 60, //
                innerRadius: 27, // 圆形进度条中心线的半径
                padding: 6,//
                circleBackground: "rgba(0,123,255,0.2)",
                stroke: "#00FFF3",
                titleFontSize: 36,
                nameFontSize: 16,
                strokeWidth: 1, // 进度条边框宽度
                startAngle: -Math.PI // 起始角度，0为3点钟方向
            };
        },
        mounted() {
            svgInit(this.drawSvg, this.id, [this.width, this.height, this.diameter1, this.diameter2, this.titleFontSize, this.nameFontSize, this.offset]);
        },
        methods: {
            drawSvg(svg, id, width, height, diameter1, diameter2, titleFontSize, nameFontSize, offset) {
                let me = this;

                const colorConfig = "#76c0ff";
                const circleR = [66, 80, 114];
                // 绘制
                svg.attr("width", width)
                    .attr("height", height);



                // 渐变弧形
                svg.append("circle")
                    .attr("class", "gradientCircle")
                    .attr("cx", width / 2)
                    .attr("cy", height / 2)
                    .attr("fill", "none")
                    .attr("r", width/3)
                    .attr("stroke-width", 34)
                    .attr("stroke", "url(#gradientRing)")
                    .attr('clip-path', 'url(#circle-clip)');

                svg.append("clipPath") // 过渡显示效果 .attr({ 'clip-path': 'url(#circle-clip)' })
                    .attr("id", "circle-clip")
                    .append("rect")
                    .attr("x", 0)
                    .attr("y", 0)
                    .attr("width", width / 2)
                    .attr("height", (height / 2) + 20);
            }
        }
    }
    ;
</script>
<style lang="scss">
    .container {
        box-sizing: border-box;
        height: 100%;
        padding: 20px;
        .group {
            height: 100%;
            background: #01080f;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            .con {
                position: relative;
                margin-bottom: 46px;
                .dashLine {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 250px;
                    height: 250px;
                    p {
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 0px;
                        height: 230px;
                        border-right: dashed 2px #ffffff;
                        opacity: 0.11;
                        transform-origin: center;
                    }
                    p:nth-child(2) {
                        transform: rotate(60deg);
                    }
                    p:nth-child(3) {
                        transform: rotate(120deg);
                    }
                }
                .graphWrp {
                    width: 250px;
                    height: 250px;
                    animation: rotateAnimate 3s linear infinite;
                }
                .icon {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 250px;
                    height: 250px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    & img {
                        width: 100px;
                    }
                }
                .outerLine {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 250px;
                    height: 250px;
                    border: 2px solid #76c0ff;
                    border-radius: 200%;
                    border-right-color: transparent;
                    border-left-color: transparent;
                    animation: antiAotateAnimate 5s linear infinite;
                }

            }
        }
    }

    @keyframes rotateAnimate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes antiAotateAnimate {
        from {
            transform: rotate(360deg);
        }
        to {
            transform: rotate(0deg);
        }
    }


</style>
